<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="innerDialogVisible"
      :close-on-click-modal="false"
      class="mt-dialog"
      width="80%"
      @close="close"
    >
      <el-form :model="form">
        <el-form-item v-if="form.website_id !== ''" label="merchant id">
          <el-input v-model="form.merchant_id" />
        </el-form-item>
        <el-form-item v-if="form.website_id !== ''" label="API_URL">
          <el-input v-model="form.api_url" />
        </el-form-item>
        <el-form-item v-if="form.website_id !== ''" label="config">
          <el-input v-model="form.config" type="textarea" :rows="4" />
        </el-form-item>
        <el-form-item v-if="form.website_id !== ''" label="广告账户ID">
          <el-input v-model="form.ads_id" />
        </el-form-item>
        <el-form-item v-if="form.inUse !== ''" label="使用">
          <el-switch
            v-model="form.inUse"
            active-text="启用"
            inactive-text="禁用"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="innerDialogVisible = false">取 消</el-button>
        <el-button v-if="form.id !== ''" type="danger" @click="deleteConfig">删 除</el-button>
        <el-button v-if="form.id !== ''" type="primary" @click="saveConfig">修 改</el-button>
        <el-button v-else type="primary" @click="saveConfig">添 加</el-button>
        <el-button v-if="form.id !== ''" type="success" @click="handleSyncFeed">同步Feed</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Get, Post, Put, Delete } from '@/api/orders/merchantconfig'
import { Get as GetWebsite } from '@/api/erp/elicink/website'
import { Sync } from '@/api/orders/merchantfeed'
import { Get as GetServerConfig } from '@/api/orders/serverstatus'
import qs from 'qs'

export default {
  name: 'Merchantconfig',
  props: ['merchantVisible', 'website_id'],
  data() {
    return {
      title: 'Google Merchant 配置',
      websites: [],
      form: {
        config: '',
        merchant_id: '',
        api_url: '',
        id: '',
        ads_id: '',
        inUse: true
      },
      innerDialogVisible: false
    }
  },
  watch: {
    merchantVisible(v) {
      this.innerDialogVisible = v
      if (v) {
        // this.handleGetWebsite()
        this.getList()
        this.hanldleGetWebsite()
      }
    },
    website_id(v) {
      this.form.website_id = v
    }

  },
  methods: {
    getServerConfig() {
      GetServerConfig(null, qs.stringify({
        website_id: this.website_id
      }))
        .then(response => {
          this.form.api_url = 'http://' + response.data.data[0].gsapi_ip + ':' + response.data.data[0].gsapi_port
        }).catch(err => {
          console.log(err)
        })
    },
    hanldleGetWebsite() {
      GetWebsite(this.website_id, null)
        .then(response => {
          this.scrollTop()
          this.title = response.data.domain + ' | Google Merchant 配置'
        }).catch(err => {
          console.log(err)
        })
    },
    handleSyncFeed() {
      Sync(this.website_id).then(response => {
        this.getList()
        this.notify('发送命令成功')
      })
    },
    getList() {
      this.listLoading = true
      Get(null, qs.stringify({
        website_id: this.website_id
      }))
        .then(response => {
          this.scrollTop()
          this.data = response.data.data
          if (this.data.length > 0) {
            this.form.config = this.data[0].config
            this.form.merchant_id = this.data[0].merchant_id
            this.form.api_url = this.data[0].api_url
            this.form.id = this.data[0].id
            this.form.ads_id = this.data[0].ads_id
            this.form.inUse = this.data[0].inUse
          } else {
            this.getServerConfig()
          }
        }).catch(err => {
          console.log(err)
          this.getServerConfig()
          this.listLoading = false
        })
    },
    saveConfig() {
      if (this.form.id === '') {
        Post(this.form
        ).then(response => {
          this.innerDialogVisible = false
          this.getList()
          this.$emit('reload')
          this.notify('添加成功')
        })
      } else {
        Put(this.form.id, this.form).then((response) => {
          this.innerDialogVisible = false
          this.$emit('reload')
          this.getList()
          this.notify('更新成功')
        })
      }
    },
    deleteConfig() {
      Delete(this.form.id).then((response) => {
        this.innerDialogVisible = false
        this.notify('删除成功')
        this.close()
      })
    },
    notify(message, duration) {
      this.$notify({
        title: '成功',
        message: message,
        type: 'success',
        duration: duration || 2000
      })
    },
    scrollTop() {
      window.scrollTo(0, 0)
    },
    close() {
      this.form = {
        config: '',
        merchant_id: '',
        api_url: '',
        id: '',
        inUse: true,
        ads_id: ''
      }
      this.$emit('closeMerchantDialog', false)
    }
  }
}
</script>

<style scoped>
  .el-tag + .el-tag {
    margin-left: 10px;
  }

  .top >>> .el-input {
    width: auto;
  }

  .top >>> .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

  .top {
    padding-left: 20px;
    margin-bottom: 5px;
    margin-top: 28px;
  }

  .input-with-select {
    width: calc(100% - 200px);
  }

  .add-btn {
    float: right;
    margin-right: 20px;
    width: 150px
  }

  .mt-pagination {
    float: right;
    margin-top: 5px;
  }

  .app-container >>> .el-dialog {
    margin-top: 48px !important;
    margin-bottom: 5px;
  }

  .mt-dialog >>> .el-transfer-panel {
    width: calc(50% - 60px);
  }

  .mt-form >>> .el-select {
    width: 100%;
  }

  .mt-form >>> .el-input__inner {
    width: 100%;
  }

  .mt-dialog >>> .el-dialog {
    margin: 10px auto !important;
  }

  .mt-dialog >>> .el-dialog__body {
    padding-bottom: 60px;
    padding-top: 5px;
  }

  .top >>> .el-select {
    width: 300px;
  }
</style>
